
<html>
<head>
  <script type="text/javascript" src="webrtc_test_utilities.js"></script>
  <script type="text/javascript" src="webrtc_test_common.js"></script>
  <script type="text/javascript">
  $ = function(id) {
    return document.getElementById(id);
  };

  window.onerror = function(errorMsg, url, lineNumber, column, errorObj) {
    failTest('Error: ' + errorMsg + '\nScript: ' + url +
             '\nLine: ' + lineNumber + '\nColumn: ' + column +
             '\nStackTrace: ' + errorObj);
  }

  var gFirstConnection = null;
  var gSecondConnection = null;
  var gLocalStream = null;

  var gRemoteStreams = {};

  function callWithSctpDataOnly() {
    createConnections({optional: [{DtlsSrtpKeyAgreement: true}]});
    promiseSctpDataChannelExchange({reliable: true})
        .then(reportTestSuccess);
    negotiate();
  }

  function callWithSctpDataAndMedia() {
    createConnections({optional: [{DtlsSrtpKeyAgreement: true}]});
    var hasExchanged = promiseSctpDataChannelExchange({reliable: true});
    navigator.mediaDevices.getUserMedia({audio: true, video: true})
        .then(addStreamToBothConnectionsAndNegotiate)
        .catch(failTest);

    Promise.all([
      hasExchanged,
      detectVideoPlaying('remote-view-1'),
      detectVideoPlaying('remote-view-2')
    ]).then(reportTestSuccess);
  }

  // This function is used for setting up a test that:
  // 1. Creates a data channel on |gFirstConnection| and sends data to
  //    |gSecondConnection|.
  // 2. When data is received on |gSecondConnection| a message
  //    is sent to |gFirstConnection|.
  // 3. When data is received on |gFirstConnection|, the data
  //    channel is closed. This function returns a promise that resolves when
  //    that last channel is closed.
  //
  // Note: you need to negotiate after calling this function, or the exchange
  // will not happen, and the promise will not resolve.
  function promiseDataChannelExchange(params) {
    var sendDataString = "send some text on a data channel."
    firstDataChannel = gFirstConnection.createDataChannel(
        "sendDataChannel", params);
    assertEquals('connecting', firstDataChannel.readyState);

    // When |firstDataChannel| transition to open state, send a text string.
    firstDataChannel.onopen = function() {
      assertEquals('open', firstDataChannel.readyState);
      firstDataChannel.send(sendDataString);
    }

    // When |firstDataChannel| receive a message, close the channel and
    // initiate a new offer/answer exchange to complete the closure.
    firstDataChannel.onmessage = function(event) {
      assertEquals(event.data, sendDataString);
      firstDataChannel.close();
      negotiate();
    }

    // When |firstDataChannel| transition to closed state, the test pass.
    var closedPromise = new Promise((resolve, reject) => {
      firstDataChannel.onclose = function() {
        assertEquals('closed', firstDataChannel.readyState);
        resolve();
      }
    });

    // Event handler for when |gSecondConnection| receive a new dataChannel.
    gSecondConnection.ondatachannel = function (event) {
      // Make secondDataChannel global to make sure it's not gc'd.
      secondDataChannel = event.channel;

      // When |secondDataChannel| receive a message, send a message back.
      secondDataChannel.onmessage = function(event) {
        assertEquals(event.data, sendDataString);
        console.log("gSecondConnection received data");
        assertEquals('open', secondDataChannel.readyState);
        secondDataChannel.send(sendDataString);
      }
    }

    return closedPromise;
  }

  // SCTP data channel setup is slightly different then RTP based
  // channels. Due to a bug in libjingle, we can't send data immediately
  // after channel becomes open. So for that reason in SCTP,
  // we are sending data from second channel, when ondatachannel event is
  // received. So data flow happens 2 -> 1 -> 2.
  // Note: you need to negotiate after calling this function, or the exchange
  // will not happen, and the promise will not resolve.
  function promiseSctpDataChannelExchange(params) {
    var sendDataString = "send some text on a data channel."
    firstDataChannel = gFirstConnection.createDataChannel(
        "sendDataChannel", params);
    assertEquals('connecting', firstDataChannel.readyState);

    // When |firstDataChannel| transition to open state, send a text string.
    firstDataChannel.onopen = function() {
      assertEquals('open', firstDataChannel.readyState);
    }

    // When |firstDataChannel| receive a message, send message back.
    // initiate a new offer/answer exchange to complete the closure.
    firstDataChannel.onmessage = function(event) {
      assertEquals('open', firstDataChannel.readyState);
      assertEquals(event.data, sendDataString);
      firstDataChannel.send(sendDataString);
    }

    return new Promise((resolve, reject) => {
      // Event handler for when |gSecondConnection| receive a new dataChannel.
      gSecondConnection.ondatachannel = function (event) {
        // Make secondDataChannel global to make sure it's not gc'd.
        secondDataChannel = event.channel;
        secondDataChannel.onopen = function() {
          secondDataChannel.send(sendDataString);
        }

        // When |secondDataChannel| receive a message, close the channel and
        // initiate a new offer/answer exchange to complete the closure.
        secondDataChannel.onmessage = function(event) {
          assertEquals(event.data, sendDataString);
          assertEquals('open', secondDataChannel.readyState);
          secondDataChannel.close();
          negotiate();
        }

        // When |secondDataChannel| transition to closed state, we're done.
        secondDataChannel.onclose = function() {
          assertEquals('closed', secondDataChannel.readyState);
          resolve();
        }
      }
    });
  }

  function addStreamToBothConnectionsAndNegotiate(localStream) {
    displayAndRemember(localStream);
    gFirstConnection.addStream(localStream);
    gSecondConnection.addStream(localStream);
    negotiate();
  }

  function createConnections(constraints) {
    gFirstConnection = createConnection(constraints, 'remote-view-1');
    assertEquals('stable', gFirstConnection.signalingState);

    gSecondConnection = createConnection(constraints, 'remote-view-2');
    assertEquals('stable', gSecondConnection.signalingState);
  }

  function createConnection(constraints, remoteView) {
    var pc = new RTCPeerConnection({sdpSemantics:'plan-b'}, constraints);
    pc.onaddstream = function(event) {
      onRemoteStream(event, remoteView);
    }
    return pc;
  }

  function displayAndRemember(localStream) {
    $('local-view').srcObject = localStream;

    gLocalStream = localStream;
  }

  function negotiate() {
    Promise.all([
      waitForConnectionToStabilizeIfNeeded(gFirstConnection),
      waitForConnectionToStabilizeIfNeeded(gSecondConnection),
    ]).then(() => {
      negotiateBetween(gFirstConnection, gSecondConnection);
    });
  }

  function onRemoteStream(e, target) {
    console.log("Receiving remote stream...");
    gRemoteStreams[target] = e.stream;
    var remoteVideo = $(target);
    remoteVideo.srcObject = e.stream;
  }

  function connectOnIceCandidate(caller, callee) {
    caller.onicecandidate = function(event) { onIceCandidate(event, callee); }
    callee.onicecandidate = function(event) { onIceCandidate(event, caller); }
  }

  function onIceCandidate(event, target) {
    if (event.candidate) {
      var candidate = new RTCIceCandidate(event.candidate);
      target.addIceCandidate(candidate);
    }
  }

  function removeBundle(sdp) {
    return sdp.replace(/a=group:BUNDLE .*\r\n/g, '');
  }

  </script>
</head>
<body>
  <table border="0">
    <tr>
      <td><video width="320" height="240" id="local-view" style="display:none"
          autoplay muted></video></td>
      <td><video width="320" height="240" id="remote-view-1"
          style="display:none" autoplay></video></td>
      <td><video width="320" height="240" id="remote-view-2"
          style="display:none" autoplay></video></td>
      <!-- Canvases are named after their corresponding video elements. -->
      <td><canvas width="320" height="240" id="remote-view-1-canvas"
          style="display:none"></canvas></td>
      <td><canvas width="320" height="240" id="remote-view-2-canvas"
          style="display:none"></canvas></td>
    </tr>
  </table>
</body>
</html>
